<template>
<el-container :class="$style.layout">
  <el-header class="top-header" height="50px">
    <div class="logo" :class="{close: isCollapse}">
      <div class="logo-img">
        <img src="@/assets/images/logo.png"/>
      </div>
    </div>
    <div class="content">
      <span class="icon-gengduo" @click="isCollapse=!isCollapse">
        <li style="font-size:20px">☰</li>
      </span>

      <el-dropdown class="user-info" @command="handleCommand">
        <span class="dropdown-link">
          <span><img src="@/assets/images/user.png" class="default-headimg"></span>
          admin<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" :class="$style['user-info-dropdown-menu']">
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
  <el-container>
    <el-aside class="aside-menu-container">
      <aside-menu :keep-alive="keepAlive" :collapse="isCollapse"></aside-menu>
    </el-aside>

    <!-- 开启缓存 -->
    <el-container v-if="keepAlive">
        <el-header height="auto" class="view-tab-header">
          <header-tabs></header-tabs>
        </el-header>
        <el-main>
          <keep-alive :include="cacheViews">
            <router-view></router-view>
          </keep-alive>  
        </el-main>
    </el-container>

    <!-- 不开启缓存 -->
    <el-main v-else>
      <router-view></router-view>
    </el-main>

  </el-container>
</el-container>
</template>

<script>
  import AsideMenu from './menu.vue'
  import HeaderTabs from './tabs.vue'
  export default {
    data() {
      return {
        keepAlive: true,
        isCollapse: false
      }
    },
    computed: {
      cacheViews() {
        return this.$store.getters['RouterCache/cacheViews'];
      }
    },
    methods: {
      handleCommand(command) {
        const commandEvent = {
          logout: ()=> {
            this.$router.push('/login')
          }
        }
        commandEvent[command]()
        
        sessionStorage.clear()
      }
    },
    components: {
      AsideMenu,
      HeaderTabs
    }
  }
</script>

<style lang="scss" module>
.layout :global {
  height: 100%;
  .top-header {
    background: $color-primary;
    padding: 0;
    display: flex;
    .logo {
      background: darken($color-primary, 4%);
      display: inline-block;
      height: 50px;
      width: 200px;
      text-align: center;
      line-height: 50px;
      color: #FFF;
      transition: width .3s;
      .logo-img {
        overflow: hidden;
        display: inline-block;
        img {
          vertical-align: middle;
          height: 30px;
        }
      }
      &.close {
        width: 64px;
        .logo-img {
          width: 36px;
        }
      }
    }
    .content {
      flex: 1;
      box-shadow: 0 1px 4px rgba(0,21,41,0.08);
      padding-right: 20px;
      .icon-gengduo {
        padding: 0 10px;
        height: 50px;
        display: inline-block;
        line-height: 50px;
        cursor: pointer;
        color: #FFF;
        &:hover {
          background: darken($color-primary, 4%);
        }
      }
      .user-info {
        float: right;
        color: #FFF;
        .dropdown-link {
          line-height: 50px;
          display: inline-block;
          padding: 0 2px;
          cursor: pointer;
          &:hover {
            background: darken($color-primary, 4%);
          }
          .default-headimg {
            height: 30px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .el-aside {
    background: #222d32;
  }
  .el-main {
    background: #f1f4f6
  }
  .view-tab-header {
    padding: 5px 10px;
    box-shadow: 0 1px 4px rgba(0,21,41,0.08);
    z-index: 1;
  }
  // 菜单
  .aside-menu-container {
    &::-webkit-scrollbar {
      width:10px;
      height:10px;
      overflow:auto
    }
    width: auto !important;
  }
  .el-menu {
    border-right: 0;
    .el-menu-item {
      border-left: 3px solid transparent;
      &.is-active {
        background: #1E282C !important;
        border-left-color: $color-primary;
      }
    }
  }
}
.user-info-dropdown-menu :global() {
  &>li {
    min-width: 80px;
  }
}
</style>